<template>
<div class="panel-box">
  <div class="panel-head" v-if="data.title">
    {{data.title}}
  </div>
  <div class="panel-body" v-if="data.voucher && data.voucher.code">
    <voucher-img-block :data="data.voucher" :codeDesc="data.voucherCodeDesc" />
  </div>
  <ul class="panel-list">
    <li v-if="data.sku_name">
      <van-row>
        <van-col class="title" span="7">价格套餐</van-col>
        <van-col class="desc" span="17">{{data.sku_name}}</van-col>
      </van-row>
    </li>
    <template v-if="data.traveler">
      <traveler-item
        v-for="(tItem, index) in data.traveler"
        :key="tItem.identity_code"
        :data="tItem"
        :index="data.traveler.length > 1 ? index+1 : 0"
      />
    </template>
    <li v-if="data.desc">
      <van-row>
        <van-col class="title" span="7">张数</van-col>
        <van-col class="desc" span="17">{{data.desc}}</van-col>
      </van-row>
    </li>
    <li v-if="data.avail_description">
      <van-row>
        <van-col class="title" span="7">有效期</van-col>
        <van-col class="desc" span="17">{{data.avail_description}}</van-col>
      </van-row>
    </li>
  </ul>
</div>
</template>

<script>
import {
  Icon,
  Button,
  Row,
  Col,
} from 'vant'
import VoucherImgBlock from "@cmpt/voucher/img-block"
import TravelerItem from '@views/order/components/traveler-item'

export default {
  name: 'voucher-info-panel',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,

    [VoucherImgBlock.name]: VoucherImgBlock,
    [TravelerItem.name]: TravelerItem,
  },

  props: {
    data: {
      type: Object,
      default: null
    },
  },

  data() {
    return {}
  },

  methods: {},

  created() {},
}
</script>

<style lang="less" src="@style_m/components/panel.less"></style><style lang="less" scoped>
@import "~@style_m/basic/utils/index";
</style>
